<template>
    <div class="song-data-card">
        <el-tabs type="border-card">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-time"></i> 演唱历史</span>
                <div class="song-history">
                    <el-form :inline="true" :model="songForm" class="demo-form-inline">
                        <el-form-item>
                            <el-input placeholder="请输入歌曲名称" v-model="songName" class="song-name-input">
                                <template slot="prepend">歌曲名称:</template>
                            </el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-input placeholder="请输入用户名称" v-model="userName" class="user-name-input">
                                <template slot="prepend">用户名称:</template>
                            </el-input>
                        </el-form-item>

                        <el-form-item>
                            <span>状态筛选</span>
                        </el-form-item>

                        <el-form-item>
                            <!-- <span>状态筛选</span> -->
                            <el-checkbox-group v-model="checkboxGroup">
                                <el-checkbox-button v-for="status in statusList" :label="status.name"
                                    :key="status.type">{{
                                        status.name
                                    }}</el-checkbox-button>
                            </el-checkbox-group>
                        </el-form-item>

                        <!-- <el-form-item class="export-btn">
                            <el-button type="primary" @click="exportNowList" icon="el-icon-s-order">导出当前筛选</el-button>
                        </el-form-item> -->
                    </el-form>

                    <div class="song-sheet">
                        <el-table :data="songList" style="width: 100%" row-class-name="success-row">
                            <el-table-column type="index" width="50">
                            </el-table-column>

                            <el-table-column label="来源" width="60">
                                <template slot-scope="scope">
                                    <el-tag size="medium">{{ scope.row.type }}</el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column label="歌曲名称" width="800">
                                <template slot-scope="scope">
                                    <span class="songName">{{ scope.row.songName }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="name" label="用户名" width="180">
                            </el-table-column>

                            <el-table-column prop="datetime" label="点歌时间" width="200">
                            </el-table-column>

                            <el-table-column prop="status" label="状态" width="200">
                            </el-table-column>


                            <el-table-column  label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-tooltip class="item" effect="dark" content="更多信息（待开发）" placement="top-start">
                                        <el-button type="primary" icon="el-icon-info" circle size="mini"
                                            @click="moreMsg(scope.songName)"></el-button>
                                    </el-tooltip>

                                    <el-tooltip class="item" effect="dark" content="复制歌名" placement="top-start">
                                        <el-button type="info" icon="el-icon-document-copy" circle size="mini"
                                            @click="copySongName(scope.songName)"></el-button>
                                    </el-tooltip>

                                    <el-tooltip class="item" effect="dark" content="完成" placement="top-start">
                                        <el-button type="success" icon="el-icon-check" circle size="mini"
                                            @click="completeSong(scope.songName)"></el-button>
                                    </el-tooltip>

                                    <el-tooltip class="item" effect="dark" content="取消" placement="top-start">
                                        <el-button type="danger" icon="el-icon-close" circle size="mini"
                                            @click="cancelSong(scope)"></el-button>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                </div>
            </el-tab-pane>

            <el-tab-pane>
                <span slot="label"><i class="el-icon-headset"></i> 按歌曲</span>

            </el-tab-pane>

            <el-tab-pane>
                <span slot="label"><i class="el-icon-user"></i> 按用户</span>

            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
  data() {
    return {
      songName: '', // 歌曲名称
      userName: '', // 用户名称
      checkboxGroup: ['队列'], //
      statusList: [ // 状态列表
        {
          name: '队列',
          type: 'queue'
        }, {
          name: '已唱',
          type: 'complete'
        }, {
          name: '取消',
          type: 'cancel'
        }
      ],
      songForm: null, // 歌曲表单
      songList: [{
        index: 0,
        type: '弹幕2',
        name: '测试人1',
        songName: '测试歌曲1',
      }, {
        index: 1,
        name: '测试人2',
        type: '弹幕2',
        songName: '测试歌曲2',
      }]
    }
  },
  methods: {
    // 导出当前筛选
    exportNowList() {

    }


  }
}


</script>

<style>
.el-input__inner {
    width: 250px;
}

/* 导出当前筛选按钮 右浮动 */
.export-btn {
    float: right;
}
</style>
